<template>
  <el-table
    :data="tableData"
    border
    style="width: 100%"
    :row-class-name="rowClassName"
  >
    <!-- 操作列 -->
    <el-table-column label="操作" width="120">
      <template #default="scope">
        <!-- 动态生成操作按钮 -->
        <template v-for="(action, index) in getAvailableActions(scope.row)" :key="index">
          <el-button
            v-if="action === '修改'"
            type="text"
            @click="handleEdit(scope.row)"
          >
            修改
          </el-button>
          <el-button
            v-else-if="action === '上移'"
            type="text"
            @click="handleMoveUp(scope.row)"
            :disabled="scope.row.isFirst"
          >
            上移
          </el-button>
          <el-button
            v-else-if="action === '下移'"
            type="text"
            @click="handleMoveDown(scope.row)"
            :disabled="scope.row.isLast"
          >
            下移
          </el-button>
          <el-button
            v-else-if="action === '置顶'"
            type="text"
            @click="handleTop(scope.row)"
          >
            置顶
          </el-button>
        </template>
      </template>
    </el-table-column>

    <!-- 其他列 -->
    <el-table-column
      prop="customerLevelName"
      label="客户等级名称"
    />
    <el-table-column
      prop="goodsPriceName"
      label="商品价格名称"
    />
    <el-table-column
      prop="type"
      label="类型"
    />
    <el-table-column
      prop="remark"
      label="备注"
    />
    <el-table-column
      label="启用状态"
      width="100"
    >
      <template #default="scope">
        <el-switch
          v-model="scope.row.enableStatus"
          active-color="#13ce66"
          inactive-color="#ff4949"
          @change="handleStatusChange(scope.row)"
        />
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import { ref } from 'vue' // 移除未使用的 computed 导入
import { ElTable, ElTableColumn, ElButton, ElSwitch } from 'element-plus'

// 模拟表格数据（实际从接口获取）
const tableData = ref([
  {
    id: 1,
    customerLevelName: '零售客户',
    goodsPriceName: '零售价',
    type: '价格',
    remark: '',
    enableStatus: true,
  },
  {
    id: 2,
    customerLevelName: '批发客户',
    goodsPriceName: '批发价',
    type: '价格',
    remark: '',
    enableStatus: true,
  },
  {
    id: 3,
    customerLevelName: 'VIP客户',
    goodsPriceName: 'VIP会员价',
    type: '价格',
    remark: '',
    enableStatus: true,
  },
  {
    id: 4,
    customerLevelName: '折扣等级一',
    goodsPriceName: '折扣率1(%)',
    type: '折扣',
    remark: '',
    enableStatus: true,
  },
])

// 动态标记首行/末行
const rowClassName = ({ rowIndex }) => { // 移除未使用的 row 参数
  if (rowIndex === 0) return 'first-row'
  if (rowIndex === tableData.value.length - 1) return 'last-row'
  return ''
}

// 动态计算每行可用操作
const getAvailableActions = (row) => {
  const rowIndex = tableData.value.findIndex(item => item.id === row.id)
  const actions = ['修改'] // 默认显示“修改”

  // 非首行显示“上移”
  if (rowIndex > 0) actions.push('上移')

  // 非末行显示“下移”
  if (rowIndex < tableData.value.length - 1) actions.push('下移')

  // 始终显示“置顶”（可根据需求调整）
  actions.push('置顶')

  return actions
}

// 修改操作
const handleEdit = (row) => {
  console.log('点击修改', row)
  // 可扩展：打开编辑弹窗逻辑
}

// 上移操作
const handleMoveUp = (row) => {
  const rowIndex = tableData.value.findIndex(item => item.id === row.id)
  if (rowIndex === 0) return // 首行无法上移

  // 交换数组位置
  [tableData.value[rowIndex], tableData.value[rowIndex - 1]] = [tableData.value[rowIndex - 1], tableData.value[rowIndex]]
}

// 下移操作
const handleMoveDown = (row) => {
  const rowIndex = tableData.value.findIndex(item => item.id === row.id)
  if (rowIndex === tableData.value.length - 1) return // 末行无法下移

  // 交换数组位置
  [tableData.value[rowIndex], tableData.value[rowIndex + 1]] = [tableData.value[rowIndex + 1], tableData.value[rowIndex]]
}

// 置顶操作
const handleTop = (row) => {
  const rowIndex = tableData.value.findIndex(item => item.id === row.id)
  if (rowIndex === 0) return // 已是首行

  // 剪切当前行并插入到数组开头
  const targetRow = tableData.value.splice(rowIndex, 1)[0]
  tableData.value.unshift(targetRow)
}

// 状态变更
const handleStatusChange = (row) => {
  console.log('状态变更:', row.enableStatus, row)
  // 可扩展：调用接口同步状态
}
</script>

<style scoped>
/* 首行/末行样式标记（可选） */
.first-row {
  background-color: #f9f9f9;
}
.last-row {
  background-color: #f9f9f9;
}

/* 按钮间距优化 */
.el-button + .el-button {
  margin-left: 8px;
}
</style>